<template>
  <!--会签管理-我的审批-->
  <a-card :bordered="false">
    <template v-if="is_verification === 'true'">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <a-form-item label="申请人">
                <a-input placeholder="请输入姓名" v-model="queryParam.proposerName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :md="10" :sm="12">
              <a-form-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  v-model="queryParam.queryStartTime"
                  :showTime="true"
                  date-format="YYYY-MM-DD "
                  style="width: 25%"
                  placeholder="请选择开始时间"
                ></j-date>
                <span style="width: 10px">~</span>
                <j-date
                  v-model="queryParam.queryEndTime"
                  :showTime="true"
                  date-format="YYYY-MM-DD"
                  style="width: 25%"
                  placeholder="请选择结束时间"
                ></j-date>
              </a-form-item>
            </a-col>
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <a-form-item label="项目">
                <a-select :options="levelOneOptions" placeholder="请选择项目" v-model="queryParam.projectId">
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <a-form-item label="审核状态">
                <a-select placeholder="请选择状态" v-model="queryParam.status">
                  <a-select-option value="1">审核中</a-select-option>
                  <a-select-option value="2">已同意</a-select-option>
                  <a-select-option value="3">已驳回</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <a-form-item label="审批编号">
                <a-input placeholder="请输入" v-model="queryParam.approvNumber"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="7" :lg="7" :md="8" :sm="24">
              <a-form-item label="单据类型">
                <!-- <a-select style="width: calc(100% - 240px)" placeholder="请选择" v-model="queryParam.billsType">
                  <a-select-option value="1">人事</a-select-option>
                  <a-select-option value="3">财务</a-select-option>
                  <a-select-option value="2">行政</a-select-option>
                  <a-select-option value="4">合同</a-select-option>
                  <a-select-option value="5">采购</a-select-option>
                </a-select> -->
                <j-dict-select-tag placeholder="请选择单据类型" v-model="queryParam.billsType" style="width: calc(100% - 240px)"
                  dictCode="bills_type"></j-dict-select-tag>
                <a-input style="width: 230px; margin-left: 10px" placeholder="请输入单据名称"
                  v-model="queryParam.billsTemplateName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <div>
        <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
          :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
          @change="handleTableChange">
          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>

          <template slot="imgSlot" slot-scope="text, record">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
            <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
              style="max-width: 80px; font-size: 12px; font-style: italic" />
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
            <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
              下载
            </a-button>
          </template>
          <span slot="wcStatus" slot-scope="text, record">
            <a v-if="record.wcStatus == 0" style="color: orange;">未提交 </a>
            <a v-if="record.wcStatus==1" style="color: blue;">审核中</a>
            <a v-if="record.wcStatus==2" style="color: green;"> 全员已通过 </a>
            <a v-if="record.wcStatus==3" style="color: red;">已驳回 </a>
            <a v-if="record.wcStatus==4" style="color: gray;">已撤销 </a>
          </span>
          <span slot="status" slot-scope="text, record">
            <a v-if="record.status == 0" style="color: orange;">未提交 </a>
            <a v-if="record.status==1" style="color: blue;">审核中</a>
            <a v-if="record.status==2" style="color: green;"> 已同意 </a>
            <a v-if="record.status==3" style="color: red;">已驳回 </a>
            <a v-if="record.status==4" style="color: gray;">已撤销 </a>
          </span>
          <template slot="isSubmit" slot-scope="text, record">
            <div :style="{color:record.isSubmit == '0'?'green':'blue'}">{{record.isSubmit == '0'?'否':'是'}}</div>
          </template>
          <span slot="action" slot-scope="text, record">
            <div v-if="record.status != 1" style="display: inline-block;margin-right: 5px;">
              <a @click="handleDetail(record,'detail')">详情</a>
            </div>
            <div v-if="record.status == 1" style="display: inline-block;margin-right: 5px;">
              <a @click="handleDetail(record,'approver')">审批</a>
            </div>
            <a @click="handleDayin(record)" v-if="record.wcStatus == 2">预览打印 </a>
          </span>
        </a-table>
      </div>
    </template>
    <template v-else-if="is_verification === 'false'">
      <div style="display: flex;flex-direction: column;height: 100%;">
        <div style="text-align: center;font-size: 16px;font-weight: 600;margin: 100px 0 20px;">
          会签审批属于重要事项，<br />需要输入手机验证码进行验证是否为本人操作。</div>
        <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 15px;">
          <a-input placeholder="请输入手机验证码" v-model="params.code" style="width: 150px;"></a-input>
          <a-button type="orange" @click="handlegetcode" :disabled="btnDis"
            style="width: 150px;text-align: center;margin-left: 10px;background: orange;color: #fff;">{{btnText}}</a-button>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 300px;">
          <a-button type="primary" @click="handlecode" style="width: 310px;text-align: center;">确定</a-button>
        </div>
      </div>
    </template>
    <template v-else>
      <div style="height: 100%;"></div>
    </template>
    <huiqian-modal ref="modalForm1" @ok="modalFormOk" @handleOpen="handleOpen"></huiqian-modal>
    <huiqian-modal ref="modalForm2" @ok="modalFormOk"></huiqian-modal>
    <huiqian-print ref="modalForm3" @ok="modalFormOk"></huiqian-print>
  </a-card>
</template>

<script>
  import huiqianPrint from './components/huiqianPrint.vue'
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import huiqianModal from './components/huiqianModal.vue'
  import {
    httpAction,
    getAction
  } from '@/api/manage'
import { indexOf } from 'xe-utils/methods'

  export default {
    name: 'WtBrandList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      huiqianModal,huiqianPrint
    },
    data() {
      return {
        description: '品牌记录表管理页面',
        // 表头
        columns: [{
            title: '审批编号',
            dataIndex: 'approvNumber',
            // key: 'rowIndex',
            width: 60,
            align: 'center',
            // customRender: function (t, r, index) {
            //   return parseInt(index) + 1
            // },
          },
          {
            title: '项目',
            align: 'center',
            dataIndex: 'projectName',
          },
          {
            title: '申请人',
            align: 'center',
            dataIndex: 'proposerName',
          },
          {
            title: '提交时间',
            align: 'center',
            dataIndex: 'submitTime',
          },
          {
            title: '标题',
            align: 'center',
            dataIndex: 'title',
          },
          {
            title: '单据名称',
            align: 'center',
            dataIndex: 'billsTemplateName',
          },
          {
            title: '流程状态',
            align: 'center',
            dataIndex: 'wcStatus',
            scopedSlots: {
              customRender: 'wcStatus'
            }
          },
          {
            title: '审核状态',
            align: 'center',
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '是否为重新提交',
            align: 'center',
            dataIndex: 'isSubmit',
            scopedSlots: {
              customRender: 'isSubmit'
            },
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: {
              customRender: 'action'
            },
          },
        ],
        url: {
          list: '/countersign/wtCountersignProcess/list',
          delete: '/wtBrand/delete',
          deleteBatch: '/wtBrand/deleteBatch',
          exportXlsUrl: '/wtBrand/exportXls',
          importExcelUrl: 'wtBrand/importExcel',
        },
        dictOptions: {},
        levelOneOptions: [],
        treeData1: [],
        superFieldList: [],
        objdata: {},
        is_verification: '',
        params: {
          code: ''
        },
        btnText: '发送手机验证码',
        btnDis: false,
      }
    },
    created() {
      if(window.sessionStorage.getItem("code")){
        this.params.code = window.sessionStorage.getItem("code");
      }
      this.getSuperFieldList();
      this.verification();
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      },
    },
    methods: {
      handleDayin: function (record) {
        // console.log('fdeswa');
        this.$refs.modalForm3.edit(record)
        this.$refs.modalForm3.title = '审批记录单'
        this.$refs.modalForm3.disableSubmit = false
      },
      handleDetail: function(record, type) {
        console.log(111, record, type);
        this.objdata = record;
        this.$refs.modalForm1.pageType = type;
        this.$refs.modalForm1.title = record.billsTemplateName;
        this.$refs.modalForm1.billsTemplateName = record.billsTemplateName;
        this.$refs.modalForm1.receiptsModel = record.receiptsModel;
        this.$refs.modalForm1.edit(record);
        this.$refs.modalForm1.disableSubmit = true;
        /* if (record.billsTemplateName == '付款计划') {
          this.$refs.modalForm.pageType = type;
          this.$refs.modalForm.title = '付款计划';
          this.$refs.modalForm.edit(record);
          this.$refs.modalForm.disableSubmit = true

        } else if (record.billsTemplateName == '材料结算') {
          this.$refs.modalForm2.pageType = type;
          this.$refs.modalForm2.title = '材料结算';
          this.$refs.modalForm2.edit(record);
          this.$refs.modalForm2.disableSubmit = true

        } else if (record.billsTemplateName == '付款申请') {
          this.$refs.modalForm3.pageType = type;
          this.$refs.modalForm3.title = '付款申请';
          this.$refs.modalForm3.edit(record);
          this.$refs.modalForm3.disableSubmit = true

        } else if (record.billsTemplateName == '劳务结算') {
          this.$refs.modalForm4.pageType = type;
          this.$refs.modalForm4.title = '劳务结算';
          this.$refs.modalForm4.edit(record);
          this.$refs.modalForm4.disableSubmit = true;

        } else if (record.billsTemplateName == '工程项目合同审批') {
          this.$refs.modalForm5.pageType = type;
          this.$refs.modalForm5.title = '工程项目合同审批';
          this.$refs.modalForm5.edit(record, type)
          this.$refs.modalForm5.disableSubmit = true;
        } */
      },
      //查看原审核记录
      handleOpen(type) {
        console.log(123, type)
        this.$refs.modalForm2.pageType = type;
        this.$refs.modalForm2.title = this.objdata.billsTemplateName;
        this.$refs.modalForm2.billsTemplateName = this.objdata.billsTemplateName;
        this.$refs.modalForm2.receiptsModel = this.objdata.receiptsModel;
        this.$refs.modalForm2.edit(this.objdata);
        this.$refs.modalForm2.disableSubmit = true;
        /* 
        
        if (this.objdata.billsTemplateName == '付款计划') {
          this.$refs.modalForm9.pageType = type;
          this.$refs.modalForm9.title = '原审核记录';
          this.$refs.modalForm9.edit(this.objdata);
          this.$refs.modalForm9.disableSubmit = true;

        } else if (this.objdata.billsTemplateName == '材料结算') {
          this.$refs.modalForm7.pageType = type;
          this.$refs.modalForm7.title = '原审核记录';
          this.$refs.modalForm7.edit(this.objdata);
          this.$refs.modalForm7.disableSubmit = true;

        } else if (this.objdata.billsTemplateName == '付款申请') {
          this.$refs.modalForm10.pageType = type;
          this.$refs.modalForm10.title = '原审核记录';
          this.$refs.modalForm10.edit(this.objdata);
          this.$refs.modalForm10.disableSubmit = true;

        } else if (this.objdata.billsTemplateName == '劳务结算') {
          this.$refs.modalForm8.pageType = type;
          this.$refs.modalForm8.title = '原审核记录';
          this.$refs.modalForm8.edit(this.objdata);
          this.$refs.modalForm8.disableSubmit = true;

        } else if (this.objdata.billsTemplateName == '工程项目合同审批') {
          this.$refs.modalForm6.pageType = type;
          this.$refs.modalForm6.title = '原审核记录';
          this.$refs.modalForm6.edit(this.objdata, type);
          this.$refs.modalForm6.disableSubmit = true;
        } */

      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }
        var params = this.getQueryParams() //查询条件
        this.loading = true
        getAction(this.url.list, params)
          .then((res) => {
            if (res.success) {
              //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
              this.dataSource = res.result.records || res.result
              if (res.result.total) {
                this.ipagination.total = res.result.total
              } else {
                this.ipagination.total = 0
              }
              //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.loading = false
          })
        getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
          if (res.success) {
            this.treeData1 = []
            let treeList1 = res.result
            for (let a = 0; a < treeList1.length; a++) {
              let temp = treeList1[a]
              temp.isLeaf = temp.leaf
              this.treeData1.push(temp)
            }

            this.levelOneOptions = [...this.treeData1].map((v) => {
              return {
                ...v,
                value: v.id,
                label: v.departName,
              }
            })
          }
        })
      },
      verification(){
        if(window._CONFIG['domianURL'].indexOf('124.70.204.126:8080') === -1){
          getAction(`/countersign/wtCountersign/isVerification?code=${this.params.code}`).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.is_verification = 'false';
            } else {
              if(res.code == 500){
                this.is_verification = 'true';
              }
            }
          })
        }else{
          this.is_verification = 'true';
        }
      },
      handlecode() {
        if (!this.params.code) {
          this.$message.warning('验证码不能为空,请输入');
          return;
        }
        getAction(`/countersign/wtCountersign/isCorrectVerification?code=${this.params.code}`).then((res) => {
          console.log(22, res)
          if (res.success) {
            this.$message.success(res.message);
            this.is_verification = 'true';
            window.sessionStorage.setItem('code',this.params.code);
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      handlegetcode() {
        getAction(`/countersign/wtCountersign/sendVerification`).then((res) => {
          console.log(22, res)
          if (res.success) {
            this.$message.success(res.message);
            this.countDown();
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      // 验证码倒计时
      countDown() {
        let t = null;
        let timer = 60;
        clearInterval(t);
        this.btnDis = true;
        this.btnText = `${timer}s`;
        t = setInterval(() => {
          if (timer == 0) {
            clearInterval(t);
            this.btnText = '重新发送';
            this.btnDis = false;
            return;
          }
          timer--;
          this.btnText = `${timer}s`;
        }, 1000)
      },
      initDictConfig() {},
      getSuperFieldList() {
        let fieldList = []
        fieldList.push({
          type: 'string',
          value: 'categoryOneId',
          text: '一级分类id',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'categoryTwoId',
          text: '二级分类id',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'categoryThreeId',
          text: '三级分类id',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'name',
          text: '名称',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'introduce',
          text: '介绍',
          dictCode: ''
        })
        this.superFieldList = fieldList
      },
    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>